<template>
  <el-card>
    <div class="list-toolbar">
      <el-button color="#1a7bb9" class="btn" @click="handleOpenDialog('新增用户')">新增</el-button>
      <el-button color="#1ab394" class="btn" :disabled="editBtnDisabled" @click="handleOpenDialog('修改用户')">修改</el-button>
      <el-button color="#ed5565" class="btn" :disabled="delBtnDisabled" @click="HandleDelete">删除</el-button>
      <el-button color="#23c6c8" class="btn" @click="handleImport">导入</el-button>
      <el-button color="#f8ac59" class="btn" @click="handleExport">导出</el-button>
      <el-button type="primary" @click="">禁用</el-button>
      <el-button type="primary" @click="">启用</el-button>
    </div>

    <el-table
        :data="tableData"
        header-cell-class-name="table-cell"
        show-overflow-tooltip
        @selection-change="handleSelectionChange"
        class="list-data">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="status" label="状态" width="60" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column fixed="right" label="Operations" >
        <template #default="{ row }">
          <el-button color="#1ab394" size="small" class="btn" @click="handleOpenDialog('修改用户', row)">修改</el-button>
          <el-button color="#ed5565" size="small" class="btn" @click="HandleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>

  <el-dialog
      draggable
      align-center
      v-model="dialogFormVisible"
      :title="dialogTitle"
      width="50%"
      class="custom-dialog">
    <el-form :model="form" class="form-dialog">
      <el-form-item label="ID" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" :placeholder="passwordPlaceholder" />
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input v-model="form.status" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.createTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="更新时间" :label-width="formLabelWidth">
        <el-input v-model="form.updateTime" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserList } from '@/api/userApi'

const editBtnDisabled = ref(true)
const delBtnDisabled = ref(true)
const selectable = (row, index) => {
  return !!row
};

const handleSelectionChange = (val) => {
  selectable.value = val

  if (val.length > 0) {
    editBtnDisabled.value = val.length !== 1;
    delBtnDisabled.value = false
  } else {
    editBtnDisabled.value = true
    delBtnDisabled.value = true
  }
}

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = [10, 20, 30, 50]
const tableData = ref([])
const total = ref(0)

const fetchData = async () => {
  const query = {
    current: currentPage.value,
    size: pageSize.value
  }
  const data = await getUserList(query)
  if (data.status && data.code === 200) {
    data.data.records.forEach(item => {
      item.status = item.status === true ? '正常' : '禁用'
    })
    tableData.value = data.data.records
    total.value = data.data.total
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const dialogTitle = ref('')
const passwordPlaceholder = ref('')
const form = ref({
  id: '',
  username: '',
  password: '',
  nickname: '',
  phone: '',
  email: '',
  status: '',
  createTime: '',
  updateTime: '',
})

const handleOpenDialog = (title, row) => {
  dialogTitle.value = title

  if (!row) {
    row = selectable.value[0]
  }

  if (title === '新增用户') {
    passwordPlaceholder.value = ''
    form.value = {}
  } else {
    passwordPlaceholder.value = '不修改密码请留空'
    form.value = row
  }
  dialogFormVisible.value = true
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="less" scoped>
@import '@/assets/less/general_table.less';
</style>